<template>
  <div class="src-panel">
    <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="场景资源" name="src">
        <el-tree :data="srcData" :props="defaultProps"
         @check-change="srcTreeCheckChange"
         show-checkbox></el-tree>
      </el-tab-pane>
      <el-tab-pane label="场景菜单" name="menu">
        <el-tree :data="menuData" :props="defaultProps"
         @check-change="menuTreeCheckChange"
         show-checkbox></el-tree>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script>

  import {
    getSceneSrcTree,
  } from '@/api/51world/sceneSrc.js'

  import {
    getSceneMenuTree,
  } from '@/api/51world/sceneMenu.js'

  export default {
    name:'LeftSidebarPanel',
    computed: {
    },
    data() {
      return {
        activeName: 'src',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        srcData:[],
        menuData:[],
      };
    },
    created() {
      this.getSceneSrcTree();
      this.getSceneMenuTree();
    },
    methods: {
      handleClick(tab, event) {
      },
      srcTreeCheckChange(node,state,isLeef){
        if(state && ('POI_GROUP'==node.type || 'PATH_GROUP'==node.type || 'RANGE_GROUP'==node.type || 'CUSTOM_GROUP'==node.type) ){
           this.$parent.showSceneSrcById(node.id,node.type);
        }else{
          this.$parent.hideSceneSrcById(node.id,node.type);
        }
      },
      menuTreeCheckChange(node,state,isLeef){
        if(state && ('LAYER'==node.type) ){
           this.$parent.showSceneSrcByMenuId(node.id,node.code);
        }else if(!state && ('LAYER'==node.type)){
          this.$parent.hideSceneSrcByMenuId(node.id);
        }
      },
      getSceneSrcTree() {
        getSceneSrcTree({
          parentId:this.$route.query.sceneId
        }).then(rsp => {
          if (rsp.code==200) {
            this.srcData = rsp.data
          }
        })
      },
      getSceneMenuTree() {
        getSceneMenuTree({
          rootId:this.$route.query.sceneId,
          sceneId:"0"
        }).then(rsp => {
          if (rsp.code==200) {
            this.menuData = rsp.data
          }
        })
      },
    }
  }
</script>
<style>
  .src-panel{
    position: absolute;
    z-index: 50;
    width: 18.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    padding: 8px 16px;
    color: #9e9e9e;
    background: #0a0a0a;
  }
</style>
